<template>
  <!-- 客户信息 -->
  <div id="customerDetail">
    <el-form :model="form" label-width="100">
      <el-form-item label="客户名称:">
        <p>{{ form.customerName }}</p>
      </el-form-item>
      <el-form-item label="客户类型:">
        <p>{{ form.typeName }}</p>
      </el-form-item>
      <el-form-item label="联系人:">
        <p>{{ form.firstcontacter }}</p>
      </el-form-item>
      <el-form-item label="联系人电话:">
        <p>{{ form.phone }}</p>
      </el-form-item>
      <el-form-item label="客户电话:">
        <p>{{ form.telephone }}</p>
      </el-form-item>
      <el-form-item label="邮箱:">
        <p>{{ form.email }}</p>
      </el-form-item>
      <el-form-item label="传真:">
        <p>{{ form.fax }}</p>
      </el-form-item>
      <el-form-item label="地址:">
        <p>{{ form.address }}</p>
      </el-form-item>
      <el-form-item label="支付方式:">
        <p>{{ form.paymethodName }}</p>
      </el-form-item>
      <el-form-item label="备注:" style="width: 100%">
        <p>{{ form.memo }}</p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { queryTypeByDic } from '@/utils/getData'
export default {
  name: 'customerDetail',
  data () {
    return {
      form: {},
      typeList: [],//客户类型列表
      paymentList: []//支付方式列表
    }
  },
  props: {
    data: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },
  watch: {
    data (val) {
      if (val) {
        this.form = val
        this.typeList.forEach(item => {
          if (item.value == val.customertype) {
            this.form.typeName = item.name
          }
        })
        this.paymentList.forEach(item => {
          if (item.value == val.paymethod) {
            this.form.paymethodName = item.name
          }
        })
      }
    }
  },
  mounted () {
    this.getType()
  },
  methods: {
    // 获取客户类型 和支付方式
    async getType () {
      let typeList = await queryTypeByDic('customerType')
      let paymentList = await queryTypeByDic('payment')
      this.typeList = typeList
      this.paymentList = paymentList
    }
  }
}
</script>
<style lang='scss' scoped>
</style>